django文件

2023-08-15 14:56| 来源: 网络整理| 查看: 265

django + jquery-file-upload 插件实现文件上传+进度条显示

1.model.py

class Fujian(models.Model): name = models.CharField(max_length=32,verbose_name="附件名称") file = models.FileField(upload_to="upload/%Y/%m/%d/") uploaded_at = models.DateTimeField(auto_now_add=True) def __str__(self): return self.name

2.forms.py

class FujianForm(forms.ModelForm): class Meta: model = Fujian fields = ('file',)

3.views.py

def fujian_add(request): if requesthod == 'POST': form = FujianForm(request.POST,request.FILES) if form.is_valid(): fujian = form.save() data = {'is_valid':True,'name':fujian.file.name,'url':fujian.file.url} else: data = {'is_valid':False} return JsonResponse(data) if requesthod == 'GET': return render(request,"fujian_add.html")

4.fujian_add.html

附件上传图片上传 {% csrf_token %} 清空数据 {# 1. 添加附件的按钮 #} 上传附件 {# 2. 上传图片的插件 #} {# 3. 显示上传的文件 #} Photo

Uploading... 0%

页面效果：

5.需要引入jquery-file-upload的js文件

6.urls.py文件

from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^fujian/add/$', views.fujian_add), ]

7.progress-bar-upload.js

$(function () { $(".js-upload-photos").click(function () { $("#fileupload").click(); }); $("#fileupload").fileupload({ dataType: 'json', sequentialUploads: true, /* 1. SEND THE FILES ONE BY ONE 这个属性指示该组件一次发送一个文件*/ start: function (e) { /* 2. WHEN THE UPLOADING PROCESS STARTS, SHOW THE MODAL */ $("#modal-progress").modal("show"); }, stop: function (e) { /* 3. WHEN THE UPLOADING PROCESS FINALIZE, HIDE THE MODAL */ $("#modal-progress").modal("hide"); }, progressall: function (e, data) { /* 4. UPDATE THE PROGRESS BAR */ var progress = parseInt(data.loaded / data.total * 100, 10); var strProgress = progress + "%"; $(".progress-bar").css({"width": strProgress}); $(".progress-bar").text(strProgress); }, done: function (e, data) { if (data.result.is_valid) { $("#gallery tbody").prepend( "" + data.result.name + "" ) } } }); });

效果：

拖入文件上传：

在fujian_add.html下面加上以下代码：

拖入文件上传

效果：

【本文地址】

公司简介

联系我们